<template>
<view>
	<block data-type="template" data-is="settingItem">
		<view class="settingItem">
			<text class="caption">商家姓名</text>
			<uni-easyinput v-model="businessFrom.name" placeholder="请输入姓名"></uni-easyinput>
		</view>
	</block>
	<block data-type="template" data-is="settingItem">
	 <view class="settingItem">
		<text class="caption">商家号码</text>
		<uni-easyinput v-model="businessFrom.phone" placeholder="请输入手机号码"></uni-easyinput>
	 </view>
	</block>
	<block data-type="template" data-is="settingItem">
	 <view class="settingItem">
		<text class="caption">商家身份证号码</text>
		<uni-easyinput v-model="businessFrom.idCard" placeholder="请输入身份证号码"></uni-easyinput>
	 </view>
	</block>
	<block data-type="template" data-is="settingItem">
	 <view class="settingItem">
		<text class="caption">商家营业执照</text>
		<uni-easyinput v-model="businessFrom.shopId" placeholder="请输入商家营业执照号码"></uni-easyinput>
	 </view>
	</block>
	<view class="settingItem">
			 <text class="caption">备注</text>
			 <input class="remark" v-model="businessFrom.remark" placeholder="请补充你的其他需求"></input>
	</view>
	<view style="width:100%;height:100rpx;"></view>
	<view class="payItem">
	     <view class="payBtn" @click="applyBusiness">立即申请</view>
	</view>
</view>
</template>

<script>
var app = getApp();
import clearInput from "../../components/clearInput/clearInput";
import uniDatetimePicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue'
const db = uniCloud.database();
const dbCollectionName = 'applyBusiness';
export default {
  data() {
    return {
      businessFrom:{
				name: '',
				phone: '',
				idCard: '',
				shopId: '',
				remark: ''
			}
    };
  },

  components: {
    clearInput,
		uniDatetimePicker
  },
  
  methods: {
		empty(value){
			if(value === '' || value === null) return true
		},
		applyBusiness(){
			const {name, phone, idCard, shopId} = this.businessFrom
			console.log(this.empty(name))
			if(this.empty(name) || this.empty(phone) || this.empty(idCard) || this.empty(shopId)) {
				uni.showToast({
				  icon: 'none',
				  title: '请填写完所有信息'
				})
				return
			}
			db.collection(dbCollectionName).add(this.businessFrom).then((res) => {
			  uni.showToast({
			    icon: 'none',
			    title: '审核通过后会以电话告知，请耐心等待'
			  })
			  setTimeout(() => uni.navigateBack(), 1500)
			}).catch((err) => {
			  uni.showModal({
			    content: err.message || '请求服务失败',
			    showCancel: false
			  })
			}).finally(() => {
			  uni.hideLoading()
			})
		}
	}
};
</script>
<style>
/* pages/bookHotel/bookHotel.wxss */

Page {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     position: relative;
     font-size: 30rpx;
     background: #f2f2f2;
}

.bookScroll {
     width: 100%;
     height: max-content;
     flex: 1;
     white-space: nowrap;
}

.bookBody {
     width: 100%;
     overflow: scroll;
     padding-bottom: 100rpx;
     /* position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 100rpx; */
}

.bookBody .bookMsg {
     margin: 24rpx;
     display: flex;
     flex-direction: column;
     padding: 36rpx;
     border-radius: 10rpx;
     box-shadow: 0rpx 6rpx 20rpx #ccc;
     background: white;
}

.payItem {
     width: 100%;
     height: 100rpx;
     display: flex;
     flex-direction: row;
     align-items: center;
     background: white;
     border-top: 1rpx solid #ee6715;
     font-size: 32rpx;
     z-index: 10;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
}

.payItem .priceItem {
     flex: 1;
     color: #ee6715;
     padding-left: 24rpx;
}

.payItem .payBtn {
     display: flex;
     align-items: center;
     height: 100%;
     justify-content: center;
     color: white;
     font-weight: bold;
     width: 100%;
     background: #ee6715;
}

.settingItem {
     display: flex;
     width: 100%;
     box-sizing: border-box;
     flex-direction: row;
     background: white;
     border-bottom: #dedede solid 1px;
     padding: 26rpx;
     align-items: center;
}

.settingItem .caption, .settingItem .value {
     font-size: 30rpx;
     color: #333;
     align-items: center;
     display: flex;
}

.settingItem .caption {
     width: 220rpx;
}

.settingItem .value {
     flex: 1;
     text-align: left;
}

.settingItem .icon {
     width: 28rpx;
     margin-left: 10rpx;
}

.settingItem .discount, .settingItem .remark {
     flex: 1;
     text-align: right;
     display: inline-block;
     align-items: center;
}

.settingItem .discount {
     color: #ee6715;
}

.settingItem .invoice {
     color: #ee6715;
     position: absolute;
     right: 0;
}

</style>